﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Api测试页面</title>
    <link href="libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="scripts/ReturnTop/css/retuntop.css" rel="stylesheet" />
    <script src="libs/jquery/jquery-3.5.1.min.js"></script>
    <script src="libs/bootstrap/js/bootstrap.min.js"></script>
    <script src="libs/ace/ace.js"></script>
    <script src="libs/ace/ext-beautify.js"></script>
    <script src="libs/ace/ext-language_tools.js"></script>
    <script src="libs/ace/ext-code_lens.js"></script>
    <script src="libs/ace/ext-textarea.js"></script>
    <script src="scripts/ReturnTop/returnTop.js"></script>
    <style type="text/css">
        .btn-wd100 {
            min-width: 100px;
        }

        .ace_editor {
            border: 1px solid lightgray;
            margin: auto;
            height: 240px;
            width: 100%;
        }

        .mt20 {
            margin-top: 20px;
        }

        .group {
            margin: 10px 0px;
            padding: 10px 0;
            border: 1px solid #888888;
            border-radius: 4px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="alert alert-info" role="alert">
            <h2>客户端 JWT 认证，获取令牌（Token）</h2>
        </div>
        <div class="group">
            <div class="row">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-2 control-label">用户信息：</label>
                        <div class="col-md-6">
                            <pre id="txtUserInfo" class="ace_editor"></pre>
                        </div>
                        <div class="col-md-4">
                            <div class="mt20">
                                <button class="btn btn-primary" type="button" onclick="GetJwtToken();">
                                    获取 JWT 令牌
                                </button>
                            </div>
                            <div class="mt20">
                                <button class="btn btn-primary" type="button" onclick="ClearJwtToken();">
                                    清除 JWT 令牌
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="alert alert-success" role="alert">
            <h2> Api 接口授权测试</h2>
        </div>
        <div class="group">
            <div class="row">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-2 control-label">订单ID：</label>
                        <div class="col-md-6">
                            <input id="txtOrderId" type="text" class="form-control" value="1152" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label">订单信息：</label>
                        <div class="col-md-6">
                            <pre id="txtOrderData" class="ace_editor"></pre>
                        </div>
                        <div class="col-md-4">
                            <button type="button" class="btn btn-primary" onclick="GetOrderData();">获取订单信息</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="return-top" class="return-top">
        <img src="./scripts/ReturnTop/images/gototop.png">
        <div>
            返回<br />顶部
        </div>
    </div>
    </div>
    <script>
        let tokenKey = "AccessToken";
        let headers = {};

        let EditorUserInfo = ace.edit("txtUserInfo", {
            theme: "ace/theme/tomorrow",
            mode: "ace/mode/json",
            autoScrollEditorIntoView: true,
            enableBasicAutocompletion: true,
            maxLines: 10,
            minLines: 10
        });

        let EditorOrderData = ace.edit("txtOrderData", {
            theme: "ace/theme/tomorrow",
            mode: "ace/mode/json",
            autoScrollEditorIntoView: true,
            enableBasicAutocompletion: true,
            maxLines: 20,
            minLines: 20
        });

        $("#return-top").returnTop();

        let LoginUser = {
            UserName: "张三丰",
            Password: "123456"
        };

        EditorUserInfo.session.setValue(JSON.stringify(LoginUser, null, 2));

        function SetHeader() {
            // 从会话存储中获取名为 "AccessToken" 的令牌
            let accessToken = sessionStorage.getItem(tokenKey);

            // 如果令牌存在，则将其设置为 HTTP 请求头部的 Authorization 字段
            if (accessToken) {
                headers.Authorization = "Bearer " + accessToken;
            }
        }

        function GetJwtToken() {
            let userInfo = EditorUserInfo.session.getValue();
            $.ajax({
                async: true,
                type: "POST",
                contentType: 'application/json',
                dataType: 'json',
                url: "http://localhost:5279/Api/Login/GetJwtToken",
                data: userInfo,
                success: function (data, textStatus, jqXHR) {
                    if (data) {
                        // 将 token 保存在会话存储中。
                        sessionStorage.setItem(tokenKey, data.token);
                        console.log(data);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log(errorThrown);
                }
            });
        }

        // 清除 JWT 令牌函数
        function ClearJwtToken() {
            // 从会话存储中移除名为 "AccessToken" 的令牌
            sessionStorage.removeItem(tokenKey);
            // 清空 headers 对象
            headers = {};
        }

        // 获取订单数据
        function GetOrderData() {
            SetHeader();
            let url = "http://localhost:5279/Api/Order";
            let data = { id: $("#txtOrderId").val() };
            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'json',
                headers: headers,
                data: data,
                success: function (data, textStatus, jqXHR) {
                    if (data) {
                        EditorOrderData.session.setValue(JSON.stringify(data, null, 2));
                        console.log(data);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    if (jqXHR.responseText) {
                        let json = JSON.parse(jqXHR.responseText);
                        EditorOrderData.session.setValue(JSON.stringify(json, null, 2));
                    } else if (jqXHR.status == 401) {
                        let json = {
                            status: 401,
                            message: jqXHR.statusText,
                            detail: "客户端未授权，请先登录获取令牌（Token）"
                        };
                        EditorOrderData.session.setValue(JSON.stringify(json, null, 2));
                    }
                }
            });
        }
    </script>
</body>

</html>